<template>
  <div class="main">
    <h2 class="main-index">实验七</h2>
    <p class="main-title">超前校正</p>
    <p class="sub-title">校正前系统开环传递函数</p>
    <!-- <img class="formula" src="../assets/img/2.png" /> -->
    <div class="formula-box">
      <p class="tip">G<span style="font-size: 12px">k</span>(s)</p>
      <p class="tip">=</p>
      <div class="insert">
        <div class="top">
          <input v-model="bForm.b0" />+ <input v-model="bForm.b1" />s+
          <input v-model="bForm.b2" />s²+ <input v-model="bForm.b3" />s³
        </div>
        <div class="bottom">
          <input v-model="aForm.a0" />+ <input v-model="aForm.a1" />s+
          <input v-model="aForm.a2" />s²+ <input v-model="aForm.a3" />s³
        </div>
      </div>
    </div>
    <p class="sub-title">校正环节传递函数</p>
    <div class="formula-box">
      <p class="tip">G<span style="font-size: 12px">c</span>(s)</p>
      <p class="tip">=</p>
      <div class="insert">
        <div class="top">Ts+1</div>
        <div class="bottom">αTs+1</div>
      </div>
    </div>
    <div class="line-box">
      <p>
        <span>G<i style="font-size:12px">k</i></span>
        <span :style="{ background: colorArr[1] }"></span>
      </p>
      <p>
        <span>G<i style="font-size:12px">c</i></span>
        <span :style="{ background: colorArr[2] }"></span>
      </p>
      <p>
        <span>G<i style="font-size:12px">k＇</i></span>
        <span :style="{ background: colorArr[3] }"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <div id="mapbox2" ref="mapbox2"></div>
    <van-field style="margin-bottom: 0.2rem" v-model="tao" type="number" center clearable label="T"
      placeholder="请输入T值"></van-field>
    <van-field style="margin-bottom: 0.2rem" v-model="aph" type="number" center clearable label="a<1"
      placeholder="请输入a值"></van-field>
    <div class="btn-box">
      <a href="javascript:;" @click="showHelp" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">帮助</a>
      <a href="javascript:;" @click="run" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">提交</a>
      <a href="javascript:;" @click="clearData" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">清除</a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from "vant";
import { colorArr } from "../utils/config";
export default {
  name: "onePage",
  data() {
    return {
      bForm: {
        b0: "",
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b5: "",
      },
      aForm: {
        a0: "",
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
      },
      TNumber: 0, // 输入值
      TArr: [], // 已提交的T值集合
      colorArr,
      myChart: null,
      myChart2: null,
      option: null,
      option2: null,
      yAxisType: "category",
      yAxisArr: [-1, -0.5, 0, 0.5, 1],
      xAxisArr: [0, 10, 1000],
      seriesArr: [], // 计算后的值集合
      seriesArr2: [], // 计算后的值集合
      tao: "",
      tao1: "",
      aph: "",
      aph1: "",
      xxx: 0,
      aaForm: {
        aa0: 0,
        aa1: 0,
        aa2: 0,
        aa3: 0,
        aa4: 0,
        aa5: 0,
      },
      bbForm: {
        bb0: 0,
        bb1: 0,
        bb2: 0,
        bb3: 0,
        bb4: 0,
        bb5: 0,
      },
      bbb0: 0,
      bbb1: 0,
      bbb2: 0,
      bbb3: 0,
      aaa0: 0,
      aaa1: 0,
      aaa2: 0,
      aaa3: 0,
      arrX: [],
      arrY: [],
      arrX2: [],
      arrY2: [],
      num: 0,
      dx: 0,
      dy: 0
    };
  },
  methods: {
    initChart() {
      const normalFontSize = 12;
      const normalNameFontSize = 16;
      const needClear = false;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          name: "{a|w/s}{b|-1}",
          nameLocation: "center",
          nameGap: "25",
          nameTextStyle: {
            fontSize: normalNameFontSize,
            formatter: "{a|ω/s}",
            rich: {
              a: {
                fontSize: 16,
              },
              b: {
                fontSize: 10,
                verticalAlign: "top",
              },
            },
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "dB",
          type: this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalNameFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr,
      };
      this.myChart.setOption(this.option);
    },
    initChart2() {
      // const tArr = [0.1];
      // const xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      // const yAxisArr = [0, 2.5, 5, 7.5, 10];
      // const seriesArr = [];
      // const yAxisType = "category";
      const normalFontSize = 12;
      const normalNameFontSize = 16;
      const needClear = false;
      this.myChart2 = this.$echarts.init(document.getElementById("mapbox2"));
      this.option2 = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          name: "{a|w/s}{b|-1}",
          nameLocation: "center",
          nameGap: "25",
          nameTextStyle: {
            fontSize: normalNameFontSize,
            formatter: "{a|ω/s}",
            rich: {
              a: {
                fontSize: 16,
              },
              b: {
                fontSize: 10,
                verticalAlign: "top",
              },
            },
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "度",
          type: this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalNameFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr2,
      };
      this.myChart2.setOption(this.option2);
    },
    showHelp() {
      this.$weui.alert(
        "<p>1.本实验采用相位超前环节对系统进行校正;</p><p>2.用户输入校正前系统开环传递函数分子、分母多项式的系数，分子分母多项式最高阶次为3次;</p><p>3.用户输入校正环节参数T、α;</p><p>4.用户按“提交”按钮系统进行仿真,按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>",
        {
          title: "帮助",
          className: "help",
          buttons: [
            {
              label: "确定",
              type: "primary",
              onClick: function () {
                console.log("ok");
              },
            },
          ],
        }
      );
    },
    submit() {
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      if (this.TArr.length >= 5) {
        return;
      }
      if (!this.TNumber || this.TNumber < 0 || this.TNumber > 10000) {
        Toast.fail("T值不合法");
        return;
      }
      this.TArr.push(this.TNumber);
    },
    clearData() {
      window.location.reload()

      // this.TNumber = 0;
      // this.TArr = [];
      // this.myChart = null;
      // this.option = null;
      // this.yAxisType = "category";
      // this.yAxisArr = [-1, -0.5, 0, 0.5, 1];
      // this.xAxisArr = [-1, -0.5, 0, 0.5, 1];
      // this.seriesArr = [];
      // this.bForm = {
      //   b0: "",
      //   b1: "",
      //   b2: "",
      //   b3: "",
      //   b4: "",
      //   b5: "",
      // };
      // this.aForm = {
      //   a0: "",
      //   a1: "",
      //   a2: "",
      //   a3: "",
      //   a4: "",
      //   a5: "",
      // };
      // this.$echarts.init(this.$refs.mapbox).dispose();
      // this.$echarts.init(this.$refs.mapbox2).dispose();
      // this.$nextTick(() => {
      //   this.initChart();
      //   this.initChart2();
      // });
    },
    getdata() {
      let w = 0.1;
      let tmpx = 1;
      let tmpy = 1;
      let fai = 0;
      while (w <= 2000) {
        let tht1 = this.bbForm.bb0 - this.bbForm.bb2 * w * w;
        let tht2 = this.bbForm.bb1 * w - this.bbForm.bb3 * w * w * w;
        let tht3 = this.aaForm.aa0 - this.aaForm.aa2 * w * w;
        let tht4 = this.aaForm.aa1 * w - this.aaForm.aa3 * w * w * w;
        let xx = (tht1 * tht3 + tht2 * tht4) / (tht3 * tht3 + tht4 * tht4);
        let yy = (tht2 * tht3 - tht1 * tht4) / (tht3 * tht3 + tht4 * tht4);
        let lwa = Math.sqrt(xx * xx + yy * yy);
        this.arrX[this.num] = 20 * (Math.log(lwa) / Math.log(10));
        let wa = Math.log(10 * w) / Math.log(10);

        if (xx == 0) {
          if (yy >= 0) {
            fai = 90;
          } else {
            fai = -90;
          }
        } else if (xx < 0) {
          if (yy > 0) {
            if (this.num > 0 && this.arrY[this.num - 1] <= 0) {
              fai = -180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
            else {
              fai = 180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
          }

          if (yy < 0) {
            if (this.num > 0 && this.arrY[this.num - 1] >= 0) {
              fai = 180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
            else {
              fai = -180 + (Math.atan(yy / xx) * 180) / Math.PI;
            }
            //
          }
          if (yy == 0) {
            fai = -180;
          }
        } else {
          {
            fai = (Math.atan(yy / xx) * 180) / Math.PI;
          }
        }

        this.arrY[this.num] = fai;
        tmpx = xx;
        tmpy = yy;
        w = w * Math.pow(10, 0.01);
        this.num = this.num + 1;
        console.log('num', this.num)
      }

      ////
      let num1 = 0;
      let w1 = 0.1;
      let tmpx1 = 1;
      let tmpy1 = 1;
      let fai1 = 0;
      while (w1 <= 2000) {
        let tht1 = this.bbb0 - this.bbb2 * w1 * w1;
        let tht2 = this.bbb1 * w1 - this.bbb3 * w1 * w1 * w1;
        let tht3 = this.aaa0 - this.aaa2 * w1 * w1;
        let tht4 = this.aaa1 * w1 - this.aaa3 * w1 * w1 * w1;
        let xx = (tht1 * tht3 + tht2 * tht4) / (tht3 * tht3 + tht4 * tht4);
        let yy = (tht2 * tht3 - tht1 * tht4) / (tht3 * tht3 + tht4 * tht4);
        let lwa = Math.sqrt(xx * xx + yy * yy);
        this.arrX2[num1] = 20 * (Math.log(lwa) / Math.log(10));
        let wa = Math.log(10 * w1) / Math.log(10);

        if (xx == 0) {
          if (yy >= 0) {
            fai1 = 90;
          } else {
            fai1 = -90;
          }
        } else if (xx < 0) {
          if (yy > 0) {
            if (num1 > 0 && this.arrY2[num1 - 1] <= 0) {
              fai1 = -180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
            else {
              fai1 = 180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
          }

          if (yy < 0) {
            if (num1 > 0 && this.arrY2[num1 - 1] >= 0) {
              fai1 = 180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
            else {
              fai1 = -180 + (Math.atan(yy / xx) * 180) / Math.PI;
            }
            //
          }
          if (yy == 0) {
            fai1 = -180;
          }
        } else {
          {
            fai1 = (Math.atan(yy / xx) * 180) / Math.PI;
          }
        }

        this.arrY2[num1] = fai1;
        tmpx1 = xx;
        tmpy1 = yy;
        w1 = w1 * Math.pow(10, 0.01);
        num1 = num1 + 1;
      }

      console.log("arrX", this.arrX);
      console.log("arrY", this.arrY);
      console.log("arrX2", this.arrX2);
      console.log("arrY2", this.arrY2);
      this.getmax_xy();
    },
    getmax_xy() {
      let that = this;
      let tempmaxx = 0;
      let tempminx = 0;
      let tempmaxy = 0;
      let tempminy = 0;
      for (let j = 1; j < this.num; j = j + 1) {
        if (tempmaxx < Math.abs(that.arrX[j])) {
          tempmaxx = Math.abs(that.arrX[j]);
        }
        if (tempminx > Math.abs(that.arrX[j])) {
          temptminx = Math.abs(that.arrX[j]);
        }
        if (tempmaxy < Math.abs(that.arrY[j])) {
          tempmaxy = Math.abs(that.arrY[j]);
        }
        if (tempminy > Math.abs(that.arrY[j])) {
          temptminy = Math.abs(that.arrY[j]);
        }
      }
      for (let j = 1; j < this.num; j = j + 1) {
        if (tempmaxx < Math.abs(that.arrX2[j])) {
          tempmaxx = Math.abs(that.arrX2[j]);
        }
        if (tempminx > Math.abs(that.arrX2[j])) {
          temptminx = Math.abs(that.arrX2[j]);
        }
        if (tempmaxy < Math.abs(that.arrY2[j])) {
          tempmaxy = Math.abs(that.arrY2[j]);
        }
        if (tempminy > Math.abs(that.arrY2[j])) {
          temptminy = Math.abs(that.arrY2[j]);
        }
      }
      for (let j = 1; j < this.num; j = j + 1) {
        if (tempmaxx < Math.abs(that.arrX[j] + that.arrX2[j])) {
          tempmaxx = Math.abs(that.arrX[j] + that.arrX2[j]);
        }
        if (tempminx > Math.abs(that.arrX[j] + that.arrX2[j])) {
          temptminx = Math.abs(that.arrX[j] + that.arrX2[j]);
        }
        if (tempmaxy < Math.abs(that.arrY[j] + that.arrY2[j])) {
          tempmaxy = Math.abs(that.arrY[j] + that.arrY2[j]);
        }
        if (tempminy > Math.abs(that.arrY[j] + that.arrY2[j])) {
          temptminy = Math.abs(that.arrY[j] + that.arrY2[j]);
        }
      }
      tempmaxx = (Math.floor(tempmaxx / 20) + 1) * 20;
      tempmaxy = Math.round(tempmaxy);

      if (tempmaxx == 0) { tempmaxx = 1; }
      if (tempmaxy == 0) { tempmaxy = 1; }
      this.dx = 130 / (1.0 * tempmaxx);
      this.dy = 130 / (1.0 * tempmaxy);
    },
    run() {
      const that = this;
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      const valueArr = Object.values(this.bForm).concat(
        Object.values(this.aForm)
      );
      let noValue = valueArr.some((item) => {
        return Boolean(Number(item));
      });
      if (!noValue) {
        Toast.fail("请输入系数");
        return;
      }
      let lineData = [];
      let lineData2 = [];

      if (this.aForm.a0 === "") {
        this.aaForm.aa0 = 0;
      } else {
        this.aaForm.aa0 = this.aForm.a0;
      }
      if (this.aForm.a1 === "") {
        this.aaForm.aa1 = 0;
      } else {
        this.aaForm.aa1 = this.aForm.a1;
      }
      if (this.aForm.a2 === "") {
        this.aaForm.aa2 = 0;
      } else {
        this.aaForm.aa2 = this.aForm.a2;
      }
      if (this.aForm.a3 === "") {
        this.aaForm.aa3 = 0;
      } else {
        this.aaForm.aa3 = this.aForm.a3;
      }
      if (this.aForm.a4 === "") {
        this.aaForm.aa4 = 0;
      } else {
        this.aaForm.aa4 = this.aForm.a4;
      }
      if (this.aForm.a5 === "") {
        this.aaForm.aa5 = 0;
      } else {
        this.aaForm.aa5 = this.aForm.a5;
      }
      if (this.bForm.b0 === "") {
        this.bbForm.bb0 = 0;
      } else {
        this.bbForm.bb0 = this.bForm.b0;
      }
      if (this.bForm.b1 === "") {
        this.bbForm.bb1 = 0;
      } else {
        this.bbForm.bb1 = this.bForm.b1;
      }
      if (this.bForm.b2 === "") {
        this.bbForm.bb2 = 0;
      } else {
        this.bbForm.bb2 = this.bForm.b2;
      }
      if (this.bForm.b3 === "") {
        this.bbForm.bb3 = 0;
      } else {
        this.bbForm.bb3 = this.bForm.b3;
      }
      if (this.bForm.b4 === "") {
        this.bbForm.bb4 = 0;
      } else {
        this.bbForm.bb4 = this.bForm.b4;
      }
      if (this.bForm.b5 === "") {
        this.bbForm.bb5 = 0;
      } else {
        this.bbForm.bb5 = this.bForm.b5;
      }

      if (this.tao === "") {
        this.tao = "1";
        this.tao1 = 1;
      } else {
        this.tao1 = this.tao;
      }
      if (this.aph === "") {
        this.aph = 0.2;
        this.aph1 = 0.2;
      } else {
        this.aph1 = this.aph;
      }
      if (this.aph1 >= 1 || this.aph1 <= 0) {
        this.aph = 0.2;
        this.aph1 = 0.2;
      }

      this.bbb0 = 1;
      this.bbb1 = this.tao1;
      this.bbb2 = 0;
      // this.bbb3 = 1;
      this.aaa0 = 1;
      this.aaa1 = this.aph1 * this.tao1;
      this.aaa2 = 0;
      // this.aaa3 = 1;

      if (this.xxx == 0) {
        if (
          Math.abs(this.aaForm.aa0) +
          Math.abs(this.aaForm.aa1) +
          Math.abs(this.aaForm.aa2) +
          Math.abs(this.aaForm.aa3) +
          Math.abs(this.aaForm.aa4) +
          Math.abs(this.aaForm.aa5) !=
          0
        ) {
          this.getdata();
        } else {
          Toast.fail("Error");
        }
      }

      let line3 = [];
      let line4 = [];
      for (let j = 0; j < this.num; j++) {
        line3.push(this.arrX[j] + this.arrX2[j]);
        line4.push(this.arrY[j] + this.arrY2[j]);
      }

      that.seriesArr = [
        {
          data: this.arrX,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[1],
          },
          // markLine: {
          //     silent: true,
          //     data: [{
          //       name:' ',
          //       yAxis: 70,
          //     },{
          //       name:' ',
          //       yAxis: -70,
          //     }],
          //     lineStyle: {
          //       color: '#ff0000',
          //         normal: {
          //             type: 'dashed'
          //     }
          //   }
          // }
        },
        {
          data: this.arrX2,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[2],
          },
        },
        {
          data: line3,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[3],
          },
        },
      ];
      that.seriesArr2 = [
        {
          data: this.arrY,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[1],
          },
          // markLine: {
          //   silent: true,
          //   data: [{
          //     name: ' ',
          //     yAxis: 90,
          //   }, {
          //     name: ' ',
          //     yAxis: -90,
          //   }],
          //   lineStyle: {
          //     color: '#ff0000',
          //     normal: {
          //       type: 'dashed'
          //     }
          //   }
          // }
        },
        {
          data: this.arrY2,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[2],
          },
        },
        {
          data: line4,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[3],
          },
        },
      ];

      this.yAxisType = "value";
      this.xAxisArr = null
      console.log(this.option);
      this.$echarts.init(this.$refs.mapbox).dispose();
      this.$echarts.init(this.$refs.mapbox2).dispose();
      this.myChart.dispose();
      this.$nextTick(() => {
        this.initChart();
        this.initChart2();
      });
    },
  },
  mounted() {
    this.initChart();
    this.initChart2();
  },
};
</script>

<style scoped>
.formula-box {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.formula-box .tip {
  font-size: 0.45rem;
}

.formula-box .insert {
  font-size: 0.38rem;
  margin-left: 2px;
}

.formula-box .insert .top {
  padding-bottom: 4px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
}

.formula-box input {
  width: 6.5vw;
  height: 4vw;
  font-size: 0.35rem;
  margin-right: 1px;
}

.line-box p {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.line-box p span:first-child {
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}

.line-box p span:last-child {
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>